<template>
    <div class="selector-input">
        <label class="placeholder">{{placeholder}}</label>
        <input 
            type="text" 
            class="input" 
            :value="inputVal"
            ref="inputSearch"
            @input="searchOptions"
        />
        <span class="iconfont icon-arrow-down"></span>
    </div>
</template>

<script>
    export default {
        name: 'SearchInput',
        props: {
            placeholder: {
                type: String,
                default: '请选择'
            },
            inputVal:{
                type:String,
                default:''
            }
        },
        setup(props, ctx){
            const searchOptions = (e) =>{
                ctx.emit('searchOptions',e.target.value)
            }
            return{
                searchOptions,
            }

        }

    }
</script>

<style lang="less" scoped>
    .selector-input {
        position: relative;
        width: 100%;
        height: 38px;

        .input {
            width: 100%;
            height: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            background-color: #fff;
            border: 1px solid #999;
            border-radius: 5px;
            outline: none;
            transition: all .2s linear;

            &:focus {
                border-color: #1890ff;
                box-shadow: 0 0 3px #1890ff;
            }
        }

        .placeholder,
        .iconfont {
            position: absolute;
        }

        .placeholder {
            left: 15px;
            top: 8px;
            color: #999;
        }

        .iconfont {
            right: 15px;
            top: 12px;
            color: #999;

            &.icon-search {
                font-size: 22px;
                top: 8px;
            }
        }
    }
</style>